<template>
  <div>
    <el-dialog
        title="填写配载信息"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        width="90%"
    >
      <div class="content">
        <el-form label-position="top" :rules="rules" ref="ruleForm" label-width="80px" :model="formLabelAlign" size="mini">
          <el-form-item label="询价单号:">
            <el-input v-model="formLabelAlign.inquiryNum"></el-input>
          </el-form-item>
          <el-form-item label="单证号:" prop="documentNum">
            <el-input v-model="formLabelAlign.documentNum"></el-input>
          </el-form-item>
          <el-form-item label="派车时间:" class="time">
            <el-button @click="handleShowTime('startTime',formLabelAlign.startTime)">{{formLabelAlign.startTime === '' ? '请选择派车时间':formLabelAlign.startTime}}</el-button>
          </el-form-item>
          <el-form-item label="预计到达时间:" class="time">
            <el-button @click="handleShowTime('arrive',formLabelAlign.arrive)">{{formLabelAlign.arrive === '' ? '请选择预计到达时间':formLabelAlign.arrive}}</el-button>
          </el-form-item>
          <el-form-item label="车牌号:" prop="carNum">
            <el-input v-model="formLabelAlign.carNum"></el-input>
          </el-form-item>
          <el-form-item label="车型:" prop="actCarType">
            <el-input v-model="formLabelAlign.actCarType"></el-input>
          </el-form-item>
          <el-form-item label="司机姓名:" prop="driverName">
            <el-input v-model="formLabelAlign.driverName"></el-input>
          </el-form-item>
          <el-form-item label="司机电话:" prop="driverPhone">
            <el-input v-model="formLabelAlign.driverPhone" type="number"></el-input>
          </el-form-item>
          <el-form-item label="身份证号:" prop="provinceNum">
            <el-input v-model="formLabelAlign.provinceNum"></el-input>
          </el-form-item>
          <el-form-item label="预估里程:">
            <el-input v-model="formLabelAlign.distance"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleOk('ruleForm')">提 交</el-button>
      </span>
      <div class="select-time">
        <van-datetime-picker
            v-if="showTime"
            v-model="currentDate"
            type="datetime"
            :title="timeTitle"
            @cancel="handleCancel"
            @confirm="handleTime"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    carObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  // 变量
  data() {
    return {
      dialogVisible: true,
      formLabelAlign: {
        startTime: '',
        arrive: '',
        documentNum: '',
        carNum: '',
        actCarType: '',
        driverName: '',
        driverPhone: '',
        provinceNum: '',
        distance: ''
      },
      currentDate: new Date(),
      timeTitle: '',
      showTime: false,
      rules: {
        documentNum: [
          { required: true, message: '请输入单证号', trigger: 'blur' }
        ],
        carNum: [
          { required: true, message: '请输入车牌号', trigger: 'blur' }
        ],
        actCarType: [
          { required: true, message: '请输入车型', trigger: 'blur' }
        ],
        driverName: [
          { required: true, message: '请输入司机姓名', trigger: 'blur' }
        ],
        driverPhone: [
          { required: true, message: '请输入司机电话', trigger: 'blur' }
        ],
        provinceNum: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        distance: [
          { required: true, message: '请输入距离', trigger: 'blur' }
        ]
      }
    }
  },
  // 方法
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    // 提交
    handleOk(formName) {
      if (this.formLabelAlign.startTime === '') {
        return this.$msg.fail('请选择派车时间')
      }
      if (this.formLabelAlign.arrive === '') {
        return this.$msg.fail('请选择预计到达时间')
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(Object.keys(this.carObj).length !== 0) {
            // 编辑
            this.$emit('handleEdit', this.formLabelAlign)
          }
          else {
            // 新增
            this.$emit('handleAllocate',this.formLabelAlign)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 显示选择器
    handleShowTime(str,time) {
      if (time !== '') {
        this.currentDate = new Date(time)
      } else {
        this.currentDate = new Date()
      }
      if (str === 'startTime') {
        this.timeTitle = '派车时间'
      } else {
        this.timeTitle = '预计到达时间'
      }
      this.showTime = true
    },
    handleCancel() {
      this.showTime = false
    },
    handleTime(value) {
      const date = new Date(value)
      const time = this.changeTime(date)
      if (this.timeTitle === '派车时间') {
        this.formLabelAlign.startTime = time
      } else {
        this.formLabelAlign.arrive = time
      }
      this.showTime = false
    },
    changeTime(date) {
      let year = date.getFullYear()
      let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0'+(date.getMonth() + 1)
      let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
      let hour = date.getHours()> 9 ? date.getHours() : '0'+date.getHours()
      let min = date.getMinutes() > 9 ? date.getMinutes() : '0'+date.getMinutes()
      return `${year}-${month}-${day} ${hour}:${min}`
    },
    // 回显
    showBack(obj) {
      this.formLabelAlign = {
        ...this.formLabelAlign,
        ...obj
      }
    }
  },
  // 生命周期函数
  created() {
    if (Object.keys(this.carObj).length !== 0) {
      this.showBack(this.carObj)
    }
  }
}
</script>

<style scoped src="../../../assets/css/transport/addVehicle.css">

</style>
